Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: enable TS intellisense in cross library projects for better/consistent DX #26605

Merged
merged 19 commits into from
Apr 27, 2023
Merged

chore: enable TS intellisense in cross library projects for better/consistent DX #26605

merged 19 commits into from
Apr 27, 2023

Conversation

Hotell
Copy link
Contributor

@Hotell Hotell commented Feb 2, 2023 •
edited
Loading

NOTES:

  1. what does "cross library projects" mean ? It's a workspace package that uses v0,v8,v9 etc
  2. this is a bigger PR that could have been chunked a bit, although chunking it could introduce issues with out of sync tsconfig base all etc.
  • generator with CI check as separate PR
  • api-extractor perf fix as separate PR

Previous Behavior

  • cross library projects don't get TS intellisense without build first, which provides sub-par DX for contributors. Even after build if one clicks on import from other project we get redirected to .d.ts instead of source ts file
  • we have no build for cross library storybook project in place, which on every storybook run generates tsconfig.base.all.json within /dist folder. This file is ignored from git.
  • we have no single source of truth for all monorepo libraries mappings in one place

New Behavior

1. introducing tsconfig.base.all.json

  • merges all projects/monorepo path aliases into 1 config that can be used in cross library projects
  • new nx generator was added tsconfig-base-all
    • executed with create-package generator
    • run on CI to verify integrity of tsconfig.base.all.json

2. cross library projects now use tsconfig.base.all.json

  • provides no-build DX for TypeScript intellisense
  • source of truth for TsPaths webpack plugin for storybooks

🎬 DEMO:

DX-intellisense-leveraging-path-alliases-cross-project.mov

3. new type-check just-script task

  • necessary to disable path aliases for projects leveraging tsconfig.base.all.json
    • without this approach tsc will explode as v0,8,9 dont have compliant TS codebase in terms of strict type checking
  • this approach also drastically improves type checking speed as described within Epic: road to faster CI/CD #27359

4. generate-api just-script task udpates

  • turns off path aliases for projects that use path aliases only for DX ( ATM cross library projects only )

5. new/refactored @fluentui/scripts-tasks utils api

  • new getFullTsConfig which returns final ts configuration ( resolves all extends )
  • refactored getTsPathAliasesConfig which has more concise API
  • refactored getTsPathAliasesConfigV8 -> getTsPathAliasesConfigUsedOnlyForDx

6. @fluentui/scripts-tasks perf improvements

  • api-extractor task logic is executed only on just-scripts api-extractor call

Related Issue(s)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 2, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 704 696 5000
Button mount 398 398 5000
Field mount 1239 1245 5000
FluentProvider mount 772 776 5000
FluentProviderWithTheme mount 107 105 10
FluentProviderWithTheme virtual-rerender 88 100 10
FluentProviderWithTheme virtual-rerender-with-unmount 101 98 10
InfoButton mount 18 18 5000
MakeStyles mount 1176 1178 50000
Persona mount 1883 1872 5000
SpinButton mount 1428 1469 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 2, 2023 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 272bb18:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 2, 2023 •
edited
Loading

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 533 B
341 B
global-context
createContextSelector		 560 B
352 B
priority-overflow
createOverflowManager		 3.194 kB
1.314 kB
react-accordion
Accordion (including children components)		 86.012 kB
26.086 kB
react-alert
Alert		 93.779 kB
22.493 kB
react-avatar
Avatar		 57.544 kB
14.966 kB
react-avatar
AvatarGroup		 15.632 kB
6.258 kB
react-avatar
AvatarGroupItem		 73.758 kB
19.478 kB
react-badge
Badge		 23.512 kB
7.197 kB
react-badge
CounterBadge		 24.416 kB
7.506 kB
react-badge
PresenceBadge		 31.904 kB
8.296 kB
react-button
Button		 37.179 kB
9.534 kB
react-button
CompoundButton		 44.328 kB
11.016 kB
react-button
MenuButton		 41.866 kB
10.861 kB
react-button
SplitButton		 50.254 kB
12.441 kB
react-button
ToggleButton		 55.397 kB
11.435 kB
react-card
Card - All		 86.061 kB
24.345 kB
react-card
Card		 80.997 kB
22.895 kB
react-card
CardFooter		 9.158 kB
3.844 kB
react-card
CardHeader		 11.048 kB
4.538 kB
react-card
CardPreview		 9.963 kB
4.192 kB
react-checkbox
Checkbox		 34.216 kB
10.784 kB
react-combobox
Combobox (including child components)		 87.199 kB
28.095 kB
react-combobox
Dropdown (including child components)		 85.583 kB
27.692 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 65.31 kB
17.931 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 204.34 kB
57.141 kB
react-components
react-components: FluentProvider & webLightTheme		 36.086 kB
11.9 kB
react-datepicker-compat
DatePicker Compat		 220.251 kB
58.471 kB
react-dialog
Dialog (including children components)		 90.867 kB
27.047 kB
react-divider
Divider		 17.399 kB
6.298 kB
react-field
Field		 18.864 kB
7.004 kB
react-image
Image		 11.479 kB
4.573 kB
react-infobutton
InfoButton		 127.925 kB
39.003 kB
react-infobutton
InfoLabel		 131.208 kB
39.996 kB
react-input
Input		 23.972 kB
7.676 kB
react-label
Label		 10.104 kB
4.185 kB
react-link
Link		 12.357 kB
5.091 kB
react-menu
Menu (including children components)		 128.202 kB
39.18 kB
react-menu
Menu (including selectable components)		 131.186 kB
39.696 kB
react-overflow
hooks only		 11.214 kB
4.271 kB
react-persona
Persona		 64.465 kB
16.892 kB
react-popover
Popover		 114.917 kB
35.388 kB
react-portal
Portal		 11.649 kB
4.262 kB
react-portal-compat
PortalCompatProvider		 6.446 kB
2.186 kB
react-positioning
usePositioning		 24.008 kB
8.798 kB
react-progress
ProgressBar		 13.856 kB
5.434 kB
react-provider
FluentProvider		 18.033 kB
6.666 kB
react-radio
Radio		 27.282 kB
8.661 kB
react-radio
RadioGroup		 11.312 kB
4.71 kB
react-select
Select		 25.357 kB
8.798 kB
react-slider
Slider		 34.112 kB
11.018 kB
react-spinbutton
SpinButton		 33.882 kB
10.325 kB
react-spinner
Spinner		 20.882 kB
6.798 kB
react-switch
Switch		 29.806 kB
9.274 kB
react-table
DataGrid		 147.659 kB
40.567 kB
react-table
Table (Primitives only)		 44.348 kB
12.347 kB
react-table
Table as DataGrid		 130.218 kB
33.128 kB
react-table
Table (Selection only)		 78.132 kB
19.127 kB
react-table
Table (Sort only)		 77.462 kB
18.939 kB
react-text
Text - Default		 12.492 kB
4.92 kB
react-text
Text - Wrappers		 15.624 kB
5.232 kB
react-textarea
Textarea		 27.399 kB
9.041 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 31.33 kB
6.764 kB
react-theme
Teams: Light theme		 17.895 kB
5.162 kB
react-tooltip
Tooltip		 46.656 kB
16.369 kB
react-utilities
SSRProvider		 180 B
159 B
🤖 This report was generated against 8232a5a7f2d7535ac7d0cd4af455ea6e70e9f613

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 2, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
RefMinimalPerf.default 155 140 1.11:1
ButtonMinimalPerf.default 114 106 1.08:1
BoxMinimalPerf.default 275 263 1.05:1
TreeWith60ListItems.default 109 104 1.05:1
DividerMinimalPerf.default 277 267 1.04:1
ListNestedPerf.default 417 400 1.04:1
PortalMinimalPerf.default 126 121 1.04:1
VideoMinimalPerf.default 546 526 1.04:1
AnimationMinimalPerf.default 397 385 1.03:1
CarouselMinimalPerf.default 328 318 1.03:1
ProviderMinimalPerf.default 262 254 1.03:1
AttachmentSlotsPerf.default 804 786 1.02:1
ButtonSlotsPerf.default 381 375 1.02:1
ChatDuplicateMessagesPerf.default 190 186 1.02:1
DropdownManyItemsPerf.default 482 471 1.02:1
ImageMinimalPerf.default 309 304 1.02:1
InputMinimalPerf.default 671 658 1.02:1
LabelMinimalPerf.default 303 298 1.02:1
LoaderMinimalPerf.default 236 231 1.02:1
RadioGroupMinimalPerf.default 358 350 1.02:1
TableMinimalPerf.default 321 316 1.02:1
TextAreaMinimalPerf.default 364 356 1.02:1
AccordionMinimalPerf.default 110 109 1.01:1
AvatarMinimalPerf.default 140 139 1.01:1
DatepickerMinimalPerf.default 4311 4268 1.01:1
DropdownMinimalPerf.default 1772 1754 1.01:1
FlexMinimalPerf.default 215 213 1.01:1
FormMinimalPerf.default 293 291 1.01:1
ItemLayoutMinimalPerf.default 892 881 1.01:1
ListWith60ListItems.default 463 459 1.01:1
MenuMinimalPerf.default 658 650 1.01:1
PopupMinimalPerf.default 485 478 1.01:1
ProviderMergeThemesPerf.default 860 854 1.01:1
SegmentMinimalPerf.default 271 267 1.01:1
SkeletonMinimalPerf.default 278 275 1.01:1
SliderMinimalPerf.default 858 846 1.01:1
CardMinimalPerf.default 404 402 1:1
ChatMinimalPerf.default 553 553 1:1
ChatWithPopoverPerf.default 238 237 1:1
CheckboxMinimalPerf.default 1344 1343 1:1
DialogMinimalPerf.default 613 610 1:1
ListCommonPerf.default 494 496 1:1
MenuButtonMinimalPerf.default 1193 1195 1:1
SplitButtonMinimalPerf.default 2744 2741 1:1
StatusMinimalPerf.default 545 545 1:1
TableManyItemsPerf.default 1418 1418 1:1
TextMinimalPerf.default 261 262 1:1
CustomToolbarPrototype.default 1793 1795 1:1
TooltipMinimalPerf.default 1577 1579 1:1
TreeMinimalPerf.default 611 613 1:1
AlertMinimalPerf.default 201 203 0.99:1
ButtonOverridesMissPerf.default 767 772 0.99:1
EmbedMinimalPerf.default 2053 2067 0.99:1
ReactionMinimalPerf.default 285 289 0.99:1
ToolbarMinimalPerf.default 668 674 0.99:1
GridMinimalPerf.default 258 262 0.98:1
HeaderMinimalPerf.default 278 284 0.98:1
LayoutMinimalPerf.default 281 286 0.98:1
ListMinimalPerf.default 409 417 0.98:1
RosterPerf.default 1644 1682 0.98:1
HeaderSlotsPerf.default 622 651 0.96:1
IconMinimalPerf.default 480 499 0.96:1
AttachmentMinimalPerf.default 95 103 0.92:1

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 2, 2023 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 787 788 5000
Breadcrumb mount 2042 2020 1000
Checkbox mount 2073 2081 5000
CheckboxBase mount 1852 1840 5000
ChoiceGroup mount 3503 3520 5000
ComboBox mount 807 798 1000
CommandBar mount 7734 7663 1000
ContextualMenu mount 13786 13480 1000
DefaultButton mount 915 913 5000
DetailsRow mount 2655 2639 5000
DetailsRowFast mount 2675 2644 5000
DetailsRowNoStyles mount 2431 2437 5000
Dialog mount 3248 3246 1000
DocumentCardTitle mount 290 280 1000
Dropdown mount 2454 2450 5000
FocusTrapZone mount 1402 1445 5000
FocusZone mount 1393 1367 5000
GroupedList mount 45083 45384 2
GroupedList virtual-rerender 22064 22100 2
GroupedList virtual-rerender-with-unmount 62121 62844 2
GroupedListV2 mount 276 279 2
GroupedListV2 virtual-rerender 261 265 2
GroupedListV2 virtual-rerender-with-unmount 277 285 2
IconButton mount 1307 1293 5000
Label mount 446 439 5000
Layer mount 3399 3430 5000
Link mount 522 520 5000
MenuButton mount 1154 1136 5000
MessageBar mount 26333 26007 5000
Nav mount 2313 2354 1000
OverflowSet mount 1020 1008 5000
Panel mount 2149 2136 1000
Persona mount 899 913 1000
Pivot mount 1057 1051 1000
PrimaryButton mount 1041 1047 5000
Rating mount 5765 5788 5000
SearchBox mount 1103 1120 5000
Shimmer mount 2292 2307 5000
Slider mount 1654 1645 5000
SpinButton mount 3404 3441 5000
Spinner mount 516 519 5000
SplitButton mount 2169 2194 5000
Stack mount 535 540 5000
StackWithIntrinsicChildren mount 1095 1103 5000
StackWithTextChildren mount 3386 3402 5000
SwatchColorPicker mount 7357 7359 5000
TagPicker mount 1689 1732 5000
Text mount 494 477 5000
TextField mount 1124 1131 5000
ThemeProvider mount 1011 1007 5000
ThemeProvider virtual-rerender 797 795 5000
ThemeProvider virtual-rerender-with-unmount 1554 1572 5000
Toggle mount 792 788 5000
buttonNative mount 239 245 5000

@Hotell Hotell changed the title Hotell/build/ts/path aliases for all 3 chore: enable TS intellisense in cross library projects to improve DX Feb 2, 2023
@layershifter layershifter removed their assignment Feb 3, 2023
@Hotell Hotell force-pushed the hotell/build/ts/path-aliases-for-all-3 branch from 210cb71 to d09eb8c Compare April 3, 2023 10:18
@github-actions github-actions bot added this to the April Project Cycle Q2 2023 milestone Apr 3, 2023
@size-auditor
Copy link

size-auditor bot commented Apr 3, 2023 •
edited
Loading

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 8232a5a7f2d7535ac7d0cd4af455ea6e70e9f613 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 3, 2023 •
edited
Loading

🕵 fluentuiv9 No visual regressions between this PR and main

@Hotell Hotell force-pushed the hotell/build/ts/path-aliases-for-all-3 branch 2 times, most recently from e056509 to 3e5cee2 Compare April 11, 2023 09:50
@Hotell Hotell force-pushed the hotell/build/ts/path-aliases-for-all-3 branch from 7d2a449 to 81290be Compare April 18, 2023 14:59
@fabricteam
Copy link
Collaborator

fabricteam commented Apr 18, 2023 •
edited
Loading

🕵 FluentUI-v0 No visual regressions between this PR and main

@Hotell Hotell force-pushed the hotell/build/ts/path-aliases-for-all-3 branch from 3a6faab to 3297686 Compare April 18, 2023 17:15
@Hotell Hotell changed the title chore: enable TS intellisense in cross library projects to improve DX chore: enable TS intellisense in cross library projects for better/consistent DX Apr 21, 2023
Hotell added 18 commits April 27, 2023 17:44
@Hotell
generate change files
8e3fd0f
@Hotell
chore(public-docsite-v9): enable whole monorepo TS path aliases for i…
6d0df39 
…mproved DX
@Hotell
chore(public-docsite-v9): migrate to solution config and type-check .…
3acdb80 
…storybook as well
@Hotell
chore(react-migration-v8-v9): enable cross project TS path aliases fo…
0b59fcf 
…r improved DX
@Hotell
chore(react-migration-v0-v9): enable cross project TS path aliases fo…
c27facc 
…r improved DX
@Hotell
feat(scripts-tasks): enable ts processing on projects with path alias…
9bd7a30 
…es used only for DX
@Hotell
fix(typings): make transformSource optional in sb addons type extensions
48e8bb7
@Hotell
chore: use tsconfig.base.all.json directly for TS path webpack plugin…
142453b 
… instead of createPathAliasesConfig()
@Hotell
feat(scripts-storybook): make createPathAliasesConfigconfigurable and…
0cfba4d 
… return resulted merge as well
@Hotell
feat(scripts-generators): update tsconfig.base.all.json after creatin…
900317a 
…g new package
@Hotell
feat(scripts-generators): incorporate base all generation to create-p…
d2f259f 
…ackage and validate integrity on CI
@Hotell
chore: update tsconfig.base.all after rebase
10edcea
@Hotell
feat(scripts-tasks): implement type-check alias, update generate-api,…
6c773b8 
… refactor getTsPathAliasesConfig
@Hotell
chore: use new type-check task for cross project TS path aliases + en…
136a5e7 
…able type-check for v9 docs
@Hotell
fix(scripts-tasks): dont invoke api-extractor logic on every just-scr…
1674faa 
…ipt call
@Hotell
scaffold tsconfig-base-all generator
5b843e2
@Hotell
feat(tools): implement tsconfig-base-all generator
cae14c6
@Hotell
refactor(ci): use nx workspace generator for tsconfib.base.all.json c…
5735d61 
…heck
@Hotell Hotell force-pushed the hotell/build/ts/path-aliases-for-all-3 branch from 4103b4b to 5735d61 Compare April 27, 2023 15:44
micahgodbolt
micahgodbolt approved these changes Apr 27, 2023
View reviewed changes
Copy link
Member

@micahgodbolt micahgodbolt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HuzzahFrazzledGIF

@Hotell Hotell mentioned this pull request Apr 27, 2023
Open
9 tasks
@Hotell Hotell merged commit 61598b8 into microsoft:master Apr 27, 2023
@Hotell Hotell deleted the hotell/build/ts/path-aliases-for-all-3 branch April 27, 2023 18:02
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 2, 2023
@marcosmoura
Merge branch 'master' into feat/drawer-header
fde52a5 
* master:
  applying package updates
  fix: dont ignore lib, lib-commonjs and lib-amd files (microsoft#27736)
  Add DraggableZone into export map (microsoft#27569)
  Add export for FolderCover.scss (microsoft#27507)
  applying package updates
  Add filetype icon for Microsoft Designer (microsoft#27724)
  ci: add build task back as lint pre-requirement to unblock temporarily import plugin lint rule (microsoft#27729)
  fix(react-charting): add missing dependency to fix lint violations during release (microsoft#27728)
  Added partition for controlled overflow menu (microsoft#27520)
  Azure Theme 8.0: Tag Button variant for DefaultButton and PrimaryButton (microsoft#27186)
  Azure Theme 8.0 dropdown fix for high contrast themes (microsoft#27346)
  chore: enable TS intellisense in cross library projects for better/consistent DX (microsoft#26605)
  chore: enforce files naming to use .styles.ts [cxe-red files] (microsoft#27710)
  chore(v0): enable emit only dts and use new conformance test API to narrow down TS Program (microsoft#27686)
  codeowner update (microsoft#27719)
  Tag/TagButton init component setup (microsoft#27102)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 2, 2023
@marcosmoura
Merge branch 'feat/drawer-components' into feat/drawer-footer
5a4a3d1 
* feat/drawer-components: (120 commits)
  fix: add missing change file
  Component testing - Donut chart (microsoft#27033)
  fix: update .npmignore files to resolve npm8/node16 regression with npm publish for v9 packages (microsoft#27741)
  chore: add .swcrc to .npmignore (generator) (microsoft#27739)
  docs: update API
  Autogenerate react-toast package (microsoft#27730)
  applying package updates
  fix: dont ignore lib, lib-commonjs and lib-amd files (microsoft#27736)
  Add DraggableZone into export map (microsoft#27569)
  Add export for FolderCover.scss (microsoft#27507)
  applying package updates
  Add filetype icon for Microsoft Designer (microsoft#27724)
  ci: add build task back as lint pre-requirement to unblock temporarily import plugin lint rule (microsoft#27729)
  fix(react-charting): add missing dependency to fix lint violations during release (microsoft#27728)
  Added partition for controlled overflow menu (microsoft#27520)
  Azure Theme 8.0: Tag Button variant for DefaultButton and PrimaryButton (microsoft#27186)
  Azure Theme 8.0 dropdown fix for high contrast themes (microsoft#27346)
  chore: enable TS intellisense in cross library projects for better/consistent DX (microsoft#26605)
  chore: enforce files naming to use .styles.ts [cxe-red files] (microsoft#27710)
  chore(v0): enable emit only dts and use new conformance test API to narrow down TS Program (microsoft#27686)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fabricteam fabricteam fabricteam left review comments

@micahgodbolt micahgodbolt micahgodbolt approved these changes

@TristanWatanabe TristanWatanabe TristanWatanabe approved these changes

@ling1726 ling1726 ling1726 approved these changes

@GeoffCoxMSFT GeoffCoxMSFT Awaiting requested review from GeoffCoxMSFT

@spmonahan spmonahan Awaiting requested review from spmonahan

Assignees
No one assigned
Labels
Area: Build System Area: DevExp Area: Typescript CI
Projects
None yet
Milestone
April Project Cycle Q2 2023
Development

Successfully merging this pull request may close these issues.
6 participants
@Hotell @fabricteam @micahgodbolt @TristanWatanabe @ling1726 @layershifter